<template>
  <Page title='英语作文练习' @gesture='onGesture' :on-page-back='onPageBack'>
    <template #navBarCustom>
      <div class="nav-bar-btns flex">
        <div class="item flex items-center" @click="goRecords">
          <img class="icon mt-2px mr-6px" src="static/icons/record.png" mode="" />
          <span class="name text-white">练习记录</span>
        </div>
      </div>
    </template>
    <template #content>
      <div class='w-full h-full p-20px box-border'>
        <div class='englishWritingIndex box-border flex flex-col'>
          <div>请拍照上传作文,最多5张照片,请按照顺序依次上传.</div>
          <div class='container'>
            <div v-for='(item,index) in imgList' :key='index' class='container-img'>
              <img class="img mt-2px mr-6px" :src="convertImgBase64(item)" mode="" />
              <img class="icon-close mt-2px mr-6px" src="static/icons/close-warning.png" mode="" @click='deleteImg(index)'/>
            </div>
            <div @click='handleUpload'>
              <img class="img mt-2px mr-6px" src="static/icons/upload.png" mode="" />
            </div>
          </div>
          <div class='bottom'>
            <el-button class='button' type='primary' @click='onSubmit'>提交</el-button>
          </div>
        </div>
      </div>
    </template>
  </Page>
</template>
<script>
import Page from '@/components/page/index.vue'
import { uploadImage } from '@/utils'
import { MODULE_ID } from '@/store/modules/module-use'

export default {
  components: {
    Page
  },
  data(){
    return {
      imgList: []
    }
  },
  mounted() {
    // 初始化模块使用记录
    this.$store.commit('setCurrentModuleUse', {
      vm: this._self,
      type: MODULE_ID.CORRECT_ENGLISH,
      subjectId: ''
    })
  },
  methods: {
    convertImgBase64(base64){
      return `data:image/png;base64,${base64}`
    },
    deleteImg(index){
      this.imgList.splice(index, 1)
    },
    async handleUpload() {
      if(this.imgList.length >= 5){
        this.$message.error('最多上传5张图片.')
        return
      }
      const { android_call } = window

      if (!android_call) {
        const beforeBase64 = await uploadImage()
        const base64 = beforeBase64.replace(/^data:image\/\w+;base64,/, '')
        this.imgList.push(base64)
        this.$message.success('上传成功！')
      } else {
        const callback = (beforeBase64) => {
          this.imgList.push(beforeBase64)
          this.$message.success('上传成功！')
        }

        const callBackName = `fn${new Date().getTime()}`
        window.android_call[callBackName] = callback.bind(this)

        android.takePhoto(callBackName)
      }
    },
    goRecords() {
      this.$router.push('/pages/correct/english/record')
    },
    onSubmit() {
      if (this.imgList.length === 0) {
        this.$message.error('请先上传作文图片.')
        return
      }
      if (this.imgList.length > 5) {
        this.$message.error('最多上传5张图片.')
        return
      }
      this.$store.commit('setImgList', this.imgList)
      this.$router.push('/pages/correct/english/result')
    },
    onPageBack() {
      this.$router.back()
    },
    onGesture(e) {
      console.log('onGesture', e)
    }
  }
}
</script>
<style scoped lang='scss'>
.nav-bar-btns {
  .item {
    height: 30px;

    .icon {
      width: 22px;
      height: 22px;
    }

    .name {
      font-size: 22px;
      line-height: 22px;
    }
  }
}

.englishWritingIndex {
  font-size: 18px;
  color: #333333;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
  height: 100%;
  overflow-y: auto;

  .container {
    min-height: 520px;
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;

    .container-img {
      position: relative;
      margin-right: 20px;
      border: 1px solid #E6F1FF;
      width: 140px;
      height: 140px;

      .icon-close {
        position: absolute;
        top: -15px;
        right: -15px;
        width: 30px;
        height: 30px;
      }
    }

    .img {
      width: 140px;
      height: 140px;
    }
  }

  .bottom {
    display: flex;
    justify-content: center;

    .button {
      width: 200px;
      height: 50px;
      border-radius: 25px;
      background: linear-gradient(82deg, #6ECDFF 0%, #00A7FF 100%);
      color: #fff;
      text-align: center;
      font-size: 22px;
    }
  }
}
</style>
